<template>
    <div style="width:300px;margin:0 auto;">
        <div><button @click="isShow = !isShow">显示/隐藏</button></div>
        
        <!-- mode="out-in" 一个消失了在执行另一个 -->
        <transition name="yzh" mode="out-in">
            <h2 v-if="isShow">hello transition</h2>
        </transition>

    </div>
</template>
<script>
export default {
    data() {
       return {
           isShow: true
       }
    },
    created() {},
    methods: {},
}
</script>
<style scoped>
h2 {
    display: inline-block;
}

.yzh-enter-active {
    animation: bounceIn 1s ease-in;
}
.yzh-leave-active {
    animation: bounceIn 1s ease-in reverse;
}
</style>
